<template>
  <div>
    <px-row :gutter="16" justify="space-between">
      <px-col :span="24" class="water_col !h-[234px]">
        <topBoard class-code="MACHINE" arrow />
      </px-col>
      <!-- <px-col :span="6" class="water_col">
        <MachineEqpStatus title="设备状态" />
      </px-col>
      <px-col :span="14">
        <MachineTodayTask title="今日任务" />
      </px-col>
      <px-col :span="4">
        <MachineTodayWarning title="今日报警" />
      </px-col> -->
    </px-row>
    <px-row class="main_chart_dom">
      <px-col :span="24" class="water_col">
        <ClearRoom />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom">
      <px-col :span="24" class="water_col">
        <ExhausetPressure />
      </px-col>
    </px-row>
    <!-- <px-row class="main_chart_dom">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle :title="'VOC/SEX废气在线检测指标'" />
          <div class="model_chart">
            <wwtCarousel :autoplay="autoplay" />
          </div>
        </div>
      </px-col>
    </px-row> -->
    <px-row class="main_chart_dom" :gutter="16">
      <px-col :span="17" class="water_col">
        <PCWSystem />
      </px-col>
      <px-col :span="7" class="water_col">
        <PVSystem />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom">
      <px-col :span="24" class="water_col">
        <CUSSystem />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom" :gutter="16">
      <px-col :span="18" class="water_col">
        <RoomTemp />
      </px-col>
      <px-col :span="6" class="water_col">
        <MachineAdvocacy />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom" style="height: 240px">
      <px-col :span="24" class="water_col">
        <gasoverview />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom" style="height: 240px">
      <px-col :span="24" class="water_col">
        <waterOverview />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom1">
      <px-col :span="24" class="water_col">
        <MachineHotWater />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom1">
      <px-col :span="24" class="water_col">
        <MachineNg />
      </px-col>
    </px-row>
    <div class="full-screen">
      <fullScreen class="icon" @click="toFullScreen" />
    </div>
  </div>
</template>
<script setup lang="ts">
import CUSSystem from "@/views/machine/components/CUSSystem.vue";
import RoomTemp from "@/views/machine/components/RoomTemp.vue";
import MachineAdvocacy from "@/views/machine/components/MachineAdvocacy.vue";
import ClearRoom from "@/views/machine/components/ClearRoom.vue";
import ExhausetPressure from "@/views/machine/components/ExhausetPressure.vue";
import MachineEqpStatus from "@/views/machine/components/MachineEqpStatus.vue";
import MachineTodayTask from "@/views/machine/components/MachineTodayTask.vue";
import MachineTodayWarning from "@/views/machine/components/MachineTodayWarning.vue";
import topBoard from "@/views/common/topBoard/index.vue";
import PVSystem from "@/views/machine/components/PVSystem.vue";
import PCWSystem from "@/views/machine/components/PCWSystem.vue";
import MachineHotWater from "@/views/machine/components/MachineHotWater.vue";
import MachineNg from "@/views/machine/components/MachineNg.vue";
import waterOverview from "@/views/machine/operation/overView/components/waterOverview.vue";
import gasoverview from "@/views/machine/operation/overView/components/gasoverview.vue";
import electricityoverview from "@/views/machine/operation/overView/components/electricityoverview.vue";
import fullScreen from "@/assets/svg/common/fullScreen.svg?component";
import { getHandoverRecord } from "@/api/modules/operation";
defineOptions({
  name: "wateroperation"
});
import { ref, reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const clickHandler = path => {
  if (path == "eqp") {
    router.push({ path: "/all/equip/runManage/record" });
  }
  if (path == "task") {
    router.push({ path: "/machine/operation/taskOverView" });
  }
  if (path == "alarm") {
    router.push({ path: "/all/alert/business" });
  }
  // if (path) {
  //   router.push(path);
  // }

  console.info("功能开发中，敬请期待。。。");
};

const gotoPath1 = () => {
  router.push("/all/equip/epm/task/list");
};
const gotoPath2 = () => {
  router.push("/all/equip/maintain/task");
};

const state = reactive({
  paiqiList: [],
  tableData: [],
  dataList: [],
  autoplay: false
});
const { tableData, paiqiList, autoplay, dataList } = toRefs(state);
const getoptions = () => {
  getHandoverRecord("MACHINE").then((response: any) => {
    console.log(response);
    tableData.value = response;
  });
};
getoptions();
setTimeout(() => {
  autoplay.value = true;
}, 15000);
const toFullScreen = () => {
  const path = "/fullScreen/machine/operation/overview";
  const params = { path };
  const { href } = router.resolve(params);
  window.open(href, "_blank");
};
</script>

<style scoped lang="scss">
.full-screen {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-color: var(--px-color-primary-light-9);
  border-radius: 4px;
  box-shadow: 0 0 4px 0 var(--px-color-primary-light-3);

  .icon {
    width: 70%;
    height: 70%;
    color: var(--px-color-primary);
  }

  &:hover {
    background-color: var(--px-color-primary-light-7);
    box-shadow: none;
  }
}

.borderRidus {
  border-radius: 4px;
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.waterdom {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
}

.first_width {
  width: calc(100% - 16px);
}

.main_chart_dom {
  height: 286px;
  margin-top: 16px;
}

.main_chart_dom1 {
  margin-top: 16px;
}

.model_chart {
  width: 100%;
  height: calc(100% - 40px);
}

.water_col {
  height: 100%;
}

.mianlist {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80%;
}

.listitem {
  flex: 1;
  cursor: pointer;

  .tasks-item-content {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
  }

  .content-icon {
    height: 46px;
  }

  .color-total {
    color: var(--px-color-primary);
  }

  .content-box {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .content-box-label {
      font-weight: 600;
      line-height: 1;
      color: #555;
      white-space: nowrap;
    }

    .content-box-data {
      display: flex;
      align-items: center;

      .data-text {
        font-size: 22px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }

      .color-done {
        color: #00b36d;
      }

      .color-total {
        color: var(--px-color-primary);
      }
    }
  }
}

.tasks-total-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  .tasks-total-content-title {
    font-weight: 600;
    line-height: 1;
    color: #333;
  }

  .tasks-total-content-data {
    display: flex;
    align-items: center;

    .data-text {
      font-size: 28px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .color-done {
      color: #00b36d;
    }

    .color-total {
      color: var(--px-color-primary);
    }
  }

  .tasks-total-content-progress {
    width: 80%;
  }

  .tasks-total-content-legend {
    display: flex;
    gap: 12px;
    align-items: center;

    .legend-item {
      display: flex;
      gap: 8px;
      align-items: center;

      .legend-text {
        font-size: 12px;
        line-height: 1;
        color: #333;
        white-space: nowrap;
      }

      .legend-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .background-done {
        background: #00b36d;
      }

      .background-total {
        background: var(--px-color-primary);
      }
    }
  }
}

:deep(.px-progress-bar__outer) {
  height: 18px !important;
}

.model_chart_con {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  justify-content: space-between;
  height: 100%;

  .bg-purple {
    width: 117px;
    height: 100%;
    padding: 16px;
    background-color: #ebecff;

    .bg-text {
      font-size: 20px;
      font-weight: 600;
    }

    .bg-value {
      font-size: 20px;
      font-weight: 600;
      color: #3b82f6;
    }
  }
}

.heard-progress {
  width: 97%;
  height: 33px;
  margin-top: 10px;
}

:deep(.px-table) {
  .px-table__cell {
    padding: 6px 0;
  }

  td,
  tr {
    border: none;
  }

  .px-table__header-wrapper,
  .px-table__fixed-header-wrapper {
    th {
      background-color: white !important;
      border: none;
    }
  }
}

:deep(.px-table--striped .px-table__body tr.px-table__row--striped td.px-table__cell) {
  background-color: rgb(231 238 251 / 50%) !important;
}

:deep(.px-table__inner-wrapper::before) {
  background: none;
}

.torouter {
  position: absolute;
  top: 24px;
  right: 20px;
  cursor: pointer;
}

.cus_con {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .humidnessDom4 {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    width: 24%;
    height: 100%;

    .bg-purple {
      display: flex;
      flex-flow: column nowrap;
      gap: 5px;
      width: 120px;
      height: 90%;
      padding: 5px;
      background-color: #ebecff;

      .bg-text {
        font-size: 16px;
        font-weight: 600;
      }

      .bg-value {
        font-size: 16px;
        font-weight: 600;
        color: #3b82f6;
      }
    }
  }
}

.bg-small {
  font-size: 10px;
}
</style>
